<template>
  <div class="region-switch-container">
    <div class="region-title">
      <h3>区域切换</h3>
      <span class="current-region" v-if="currentRegion">
        当前: {{ currentRegion.name }}
      </span>
    </div>
    
    <div class="region-buttons">
      <button
        v-for="region in regions"
        :key="region.id"
        :class="[
          'region-btn',
          { 'active': region.id === currentRegionId }
        ]"
        @click="handleRegionSwitch(region.id)"
        :disabled="loading"
      >
        <div class="btn-content">
          <div class="region-name">{{ region.name }}</div>
          <div class="region-code">{{ region.code }}</div>
        </div>
        <div class="btn-indicator" v-if="region.id === currentRegionId"></div>
      </button>
    </div>
    
    <div class="region-controls">
      <button 
        class="control-btn prev" 
        @click="switchToPrevRegion"
        :disabled="loading || !hasRegions"
        title="上一个区域"
      >
        <svg width="16" height="16" viewBox="0 0 16 16">
          <path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="2" fill="none"/>
        </svg>
      </button>
      
      <button 
        class="control-btn next" 
        @click="switchToNextRegion"
        :disabled="loading || !hasRegions"
        title="下一个区域"
      >
        <svg width="16" height="16" viewBox="0 0 16 16">
          <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="2" fill="none"/>
        </svg>
      </button>
      
      <button 
        class="control-btn refresh" 
        @click="refreshRegions"
        :disabled="loading"
        title="刷新区域列表"
      >
        <svg width="16" height="16" viewBox="0 0 16 16" :class="{ 'spinning': loading }">
          <path d="M8 2v4l3-3-3-3zM2 8a6 6 0 1 0 12 0" stroke="currentColor" stroke-width="2" fill="none"/>
        </svg>
      </button>
    </div>
    
    <div class="loading-overlay" v-if="loading">
      <div class="loading-spinner"></div>
      <span>加载中...</span>
    </div>
    
    <div class="error-message" v-if="error">
      <span>{{ error }}</span>
      <button @click="refreshRegions" class="retry-btn">重试</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useGreenPowerRegionStore } from '@/stores/greenPowerRegion'
import { storeToRefs } from 'pinia'

// 使用store
const regionStore = useGreenPowerRegionStore()
const {
  regions,
  currentRegionId,
  currentRegion,
  hasRegions,
  loading,
  error
} = storeToRefs(regionStore)

const {
  fetchRegions,
  setCurrentRegion,
  switchToNextRegion,
  switchToPrevRegion
} = regionStore

// 事件处理
const handleRegionSwitch = (regionId: string) => {
  if (regionId !== currentRegionId.value) {
    setCurrentRegion(regionId)
  }
}

const refreshRegions = () => {
  fetchRegions()
}

// 生命周期
onMounted(() => {
  fetchRegions()
})
</script>

<style scoped>
.region-switch-container {
  position: relative;
  background: linear-gradient(135deg, rgba(0, 150, 255, 0.1), rgba(0, 200, 150, 0.1));
  border: 1px solid rgba(0, 150, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.region-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.region-title h3 {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

.current-region {
  color: #00d4aa;
  font-size: 14px;
  font-weight: 500;
}

.region-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.region-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.region-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 150, 255, 0.5);
  transform: translateY(-2px);
}

.region-btn.active {
  background: linear-gradient(135deg, rgba(0, 150, 255, 0.2), rgba(0, 200, 150, 0.2));
  border-color: #00d4aa;
  box-shadow: 0 4px 16px rgba(0, 212, 170, 0.3);
}

.region-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-content {
  text-align: center;
}

.region-name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

.region-code {
  color: #a0a0a0;
  font-size: 12px;
}

.btn-indicator {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  background: #00d4aa;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 212, 170, 0.6);
}

.region-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.control-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 150, 255, 0.5);
}

.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.spinning {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: #ffffff;
  font-size: 14px;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #00d4aa;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 8px;
}

.error-message {
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.3);
  border-radius: 6px;
  padding: 12px;
  margin-top: 12px;
  color: #ff6b6b;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.retry-btn {
  background: rgba(255, 107, 107, 0.2);
  border: 1px solid rgba(255, 107, 107, 0.5);
  border-radius: 4px;
  padding: 4px 8px;
  color: #ff6b6b;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.retry-btn:hover {
  background: rgba(255, 107, 107, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .region-buttons {
    grid-template-columns: 1fr;
  }
  
  .region-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>